<div class="page-content">
    <div class="page-header position-relative">
        <h1>
            Danh mục
            <small>
                <i class="icon-double-angle-right"></i>
                with selectable items(single &amp; multiple) and custom icons
            </small>
        </h1>
    </div>
    <div>
        <div class="query-tree">
            <div id="treeview" class="treeview" style="height: 200px; width: 200px" ></div>
        </div>
    </div>
</div>
<?php
// Jstree query
$cid = 1;
$date = new DateTime();
$qdate = $date->format('Y-m-d H:i:s');
?>
<script>
    //Jstree
    $(function () {
        var cid = <?php echo $cid; ?>;
        var parent_node = 0;
        $("#treeview")
            .jstree({
                "plugins" : [
                    "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
                ],
                "json_data" : {
                    "ajax" : {
                        "url" : "<?php echo base_url(); ?>public/admin/treeview/_treeview/server.php",
                        "data" : function (n) {
                            return {
                                "operation" : "get_children",
                                "id" : n.attr ? n.attr("id").replace("node_","") : 1,
                                "cid" : cid,
                                "todate" : "",
                                "fromdate" :""
                            };
                        }
                    }
                },
                "search" : {
                    "ajax" : {
                        "url" : "<?php echo base_url(); ?>public/admin/treeview/_treeview/server.php",
                        "data" : function (str) {
                            return {
                                "operation" : "search",
                                "search_str" : str,
                                "cid" : cid
                            };
                        }
                    }
                },
                "types" : {
                    "max_depth" : -2,
                    "max_children" : -2,
                    "valid_children" : [ "drive" ],
                    "types" : {
                        "default" : {
                            "valid_children" : "none",
                            "icon" : {
                                "image" : "<?php echo base_url(); ?>public/admin/treeview/images/file.png"
                            }
                        },
                        "folder" : {
                            "valid_children" : [ "default", "folder" ],
                            "icon" : {
                                "image" : "<?php echo base_url(); ?>public/admin/treeview/images/folder.png"
                            }
                        },
                        "drive" : {
                            "valid_children" : [ "default", "folder" ],
                            "icon" : {
                                "image" : "<?php echo base_url(); ?>public/admin/treeview/images/root.png"
                            },
                            "start_drag" : false,
                            "move_node" : false,
                            "delete_node" : false,
                            "remove" : false
                        }
                    }
                },
                "ui" : {
                    "initially_select" : [ "node_4" ]
                },
                "core" : {
                    "initially_open" : [ "node_2" , "node_3" ]
                }
            })
            .bind("create.jstree", function (e, data) {
                $.post(
                    "<?php echo base_url(); ?>public/admin/treeview/_treeview/server.php",
                    {
                        "operation" : "create_node",
                        "id" : data.rslt.parent.attr("id").replace("node_",""),
                        "position" : data.rslt.position,
                        "qname" : data.rslt.name,
                        "type" : data.rslt.obj.attr("rel"),
                        "cid" : cid,
                        "query" : $.cookie("query"),
                        "qdate" : "<?php echo (string)$qdate; ?>"
                    },
                    function (r) {
                        if(r.status) {
                            $(data.rslt.obj).attr("id", "node_" + r.id);
                        }
                        else {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );
            })
            .bind("remove.jstree", function (e, data) {
                data.rslt.obj.each(function () {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "<?php echo base_url(); ?>public/admin/treeview/_treeview/server.php",
                        data : {
                            "operation" : "remove_node",
                            "id" : this.id.replace("node_",""),
                            "cid" : cid
                        },
                        success : function (r) {
                            if(!r.status) {
                                data.inst.refresh();
                            }
                        }
                    });
                });
            })
            .bind("rename.jstree", function (e, data) {
                $.post(
                    "<?php echo base_url(); ?>public/admin/treeview/_treeview/server.php",
                    {
                        "operation" : "rename_node",
                        "id" : data.rslt.obj.attr("id").replace("node_",""),
                        "qname" : data.rslt.new_name,
                        "cid" : cid
                    },
                    function (r) {
                        if(!r.status) {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );
            })
            .bind("move_node.jstree", function (e, data) {
                data.rslt.o.each(function (i) {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "<?php echo base_url(); ?>public/admin/treeview/_treeview/server.php",
                        data : {
                            "operation" : "move_node",
                            "id" : $(this).attr("id").replace("node_",""),
                            "ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""),
                            "position" : data.rslt.cp + i,
                            "qname" : data.rslt.name,
                            "copy" : data.rslt.cy ? 1 : 0,
                            "cid" : cid
                        },
                        success : function (r) {
                            if(!r.status) {
                                $.jstree.rollback(data.rlbk);
                            }
                            else {
                                $(data.rslt.oc).attr("id", "node_" + r.id);
                                if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
                                    data.inst.refresh(data.inst._get_parent(data.rslt.oc));
                                }
                            }
                            $("#analyze").click();
                        }
                    });
                });
            })
            .bind("select_node.jstree", function (e, data) {
                var parent=data.inst._get_parent(data.rslt.obj);
                parent_node = parent.attr('id');
            })
            .bind("after_open.jstree", function (e, data) {
                $('li').each(function(){
                    var type = $(this).attr("rel");
                    if(type =="default"){
                        var r_type = $(this).attr("type");
                        report = $(this).find('a').find('.jstree-icon');
                        var url = 'views/public/images/'+r_type+'.png';
                        report.css("background-image","url('"+url+"')");
                    }
                });
            });
        $('#mmenu a').click(function () {
            $("#treeview").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
        });


    });
</script>